<script setup>
// vue2获取 dom 元素 this.$refs.dom

import { onMounted, ref } from 'vue';
import Son from './components/Son.vue';

/* 
  获取模板元素
  1. 创建 空 h1Ref
  2. h1Ref 和 dom 元素绑定，等 dom 渲染完成(onMounted)，就会存放到h1Ref
  3. 可以通过 h1Ref 获取到 dom 并修改内容
*/

const divDom = ref(null)
// console.log('divDom', divDom.value);
onMounted(() => {
  // console.log('divDom', divDom.value);
})
const change = () => {
  divDom.value.innerHTML = '超级模板'
}


// vue2 获取子组件的 属性和方法 this.$refs.form.reset()
// 父组件想使用子组件的方法，需要子组件主动暴露 defineExpose
const son = ref(null)
onMounted(() => {
  console.log('son.value', son.value);
  console.log("name", son.value.name)
  son.value.sayHi()
})
</script>

<template>
  <h1>Hello vue3</h1>
  <div ref="divDom">模板</div>
  <button @click="change">点我</button>
  <hr>
  <Son ref="son"></Son>
</template>
